<script setup lang="ts">
const list = ref([]),
  list1 = ref([]);
</script>

<template>
  <div>
    <h1 class="title">2.v-empty</h1>
    <div class="btns">
      <button class="btn" @click="list = []">加载</button>
      <button class="btn" @click="list = [1, 2, 3]">加载完成</button>
    </div>
    <div v-empty="list.length > 0" class="module">
      空指令
      <ul>
        <li v-for="(item, idx) in list" :key="idx">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="btns">
      <button class="btn" @click="list1 = []">加载</button>
      <button class="btn" @click="list1 = [1, 2, 3]">加载完成</button>
    </div>
    <div v-empty="list1.length > 0" class="module">
      空指令
      <ul>
        <li v-for="(item, idx) in list1" :key="idx">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
